<!--
 * @Descripttion: 客户管理列表页
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors  : cxguo
 * @LastEditTime : 2019-12-20 10:24:27
 -->
<template>
  <div>
    <el-main>
      <div>
        <el-form :inline="true" :model="searchData" size="mini" label-position="left" label-width="80px">
          <el-form-item label="单据号: ">
            <el-input v-model="searchData.purchaseNumber" />
          </el-form-item>
          <el-form-item label="供应商: ">
            <el-select v-model="searchData.supplierId" clearable :filter-method="getSuppilers" filterable placeholder="请选择">
              <el-option
                v-for="item in optionsData.supplier"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="交易状态: ">
            <el-select v-model="searchData.state" :filter-method="getSuppilers" filterable placeholder="请选择">
              <el-option
                v-for="(item, index) in [{code:'0', name:'未付款'},{code:'1', name:'已付款'}]"
                :key="item.code + index"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="采购日期: ">
            <el-date-picker
              v-model="searchData.date"
              type="datetimerange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="">
            <el-button icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()">
              搜 索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-container">
        <el-table
          ref="productTable"
          v-loading="tableLoading.customer"
          :data="tableData.customer"
          style="width: 100%"
          border
          @selection-change="onSelectionChange"
        >
          <el-table-column type="selection" width="60" align="center" />
          <el-table-column label="单据号" width="180" prop="returnNumber" align="left" />
          <el-table-column label="采购日期" width="120" :show-overflow-tooltip="true" prop="returnDate" align="left" />
          <el-table-column label="供应商" width="240" :show-overflow-tooltip="true" prop="supplierName" align="left" />
          <el-table-column label="应付金额" width="100" prop="amountPayable" align="right" />
          <el-table-column label="实付金额" width="100" prop="amountPaid" align="right" />
          <el-table-column label="操作员" width="100" prop="trueName" align="left" />
          <el-table-column label="备注" width="200" prop="remarks" align="left" />
          <el-table-column label="操作" width="160" align="center" fixed="left">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" :loading="scope.row === currentId" @click="btnDelData(scope.$index, scope.row)">删 除
              </el-button>
              <el-button size="mini" type="primary" @click="btnDetailData(scope.$index, scope.row)">详 情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageInfo.rows"
          :page-sizes="[20,30,40]"
          :current-page.sync="pageInfo.page"
          :total="pageInfo.totalCount"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </el-main>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listData } from '@/api/return-list'
import { comboList } from '@/api/supplier'

export default {
  name: 'CustomerList',
  filters: {
  },
  mixins: [oftenuse],
  data() {
    return {
      currentId: null,
      searchData: {},
      optionsData: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
  },
  created() {
    this.listData()
  },
  methods: {
    btnSearch() {
      this.setBtnLoading('search', true)
      this.listData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    btnDelData() {

    },
    btnDetailData(index, row) {
      const purchaseId = row.id
      this.jump2purchaseOutDetail({ purchaseId, operation: 'update' })
    },
    // api
    getSuppilers(params) {
      comboList(params).then(res => {
        if (res.data.flag) {
          this.$set(this.optionsData, 'supplier', res.data.data)
        }
      })
    },
    listData(params = { data: this.searchData, pageInfo: this.pageInfo }) {
      if (params.data.date) {
        const data = params.data
        data.beginDate = data.date[0]
        data.endDate = data.date[1]
      }
      this.setTableLoading('customer', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          this.setTableLoading('customer', false)
          if (res.data.flag) {
            this.setTableData('customer', res.data.data.data)
            this.pageInfo = res.data.data.pageInfo
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('customer', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.page = 1
      this.pageInfo.rows = val
      this.listData()
    },
    onCurrentChange(val) {
      this.pageInfo.page = val
      this.listData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
